<script setup lang="ts" name="DiceLottery">
import API from '@/api';
import { userinfo } from '@/store';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
dayjs.extend(duration);

const { t } = useI18n();
const router = useRouter();
const route = useRoute();

const piniaUserinfo: any = userinfo();

const data: any = reactive({
  lotteryList: [],
  nowTime:''
});

const { lotteryList, nowTime} = toRefs(data);

const headerTitle: any = computed(() => {
  return route?.query?.title || t('home.title2')
});

const initlotteryList = async (type: any) => {
  try {
    let res = await API.lotteryPrivateAPI({
      typeConfigCode: type 
    });
    console.log('initlotteryList', res);
    if(res?.code === 200) {
      lotteryList.value = res.data.periods || [];
      nowTime.value = res.data.time
    }
  } catch (error) {
  }
};
watch(() => route?.query?.type, (val) => {
  if(val) {
    initlotteryList(val);
  }
}, {
  immediate: true
});

const handleGoBet = (item: any) => {
  router.push({
    path: "/dice",
    query: {
      planId: item.planId,
      id:item.id,
      typeConfigCode: item.typeConfigCode,
      bigCode: item.bigCode,
      title: headerTitle.value,
    }
  });
}
</script>

<template>
  <div class="ColorfultimesPage">
    <DetailHeader :title="headerTitle" :isNeedBackIcon="true"/>
    <div class="lotteryList">
    <div
      class="lotteryItem"
      v-for="(item, index) in lotteryList"
      :key="item.id"
      @click="handleGoBet(item)"
    >
      <div class="top">
        <div class="left">{{ item?.planName}}</div>
      </div>
      <div class="bottom">
        <div class="timeData">
          <div class="ticketNumber">
            <div class="text1">{{ item?.period }}</div>
          </div>
          <div class="money margin1">
            {{ dayjs(+item?.startTime).format('MM-DD HH:mm') }} - {{ dayjs(+item?.endTime).format('MM-DD HH:mm') }}
          </div>
        </div>
        <div class="middle"></div>
        <div class="right">
          <div class="deadLine margin1">
            <Iconfont name="icon-icon_shijian" color="#1E93FF" size="16" />
            {{  dayjs.duration(item?.endTime - nowTime).hours() }} {{ t('nagaland.test3') }} {{ dayjs.duration(item?.endTime - nowTime).minutes() }} {{ t('nagaland.test4') }} {{ dayjs.duration(item?.endTime - nowTime).seconds() }} {{ t('nagaland.test5') }}</div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
